<template>
  <div class="app-container layout-good-list">
    <div class="operate-container">
      <el-button type="primary" @click="handleCreateProduct()" size="small">新 建</el-button>
    </div>
    <div class="table-container">
      <el-table :data="list" v-loading="listLoading" class="good-table">
        <el-table-column label="商品编号" width="200">
          <template slot-scope="scope">{{scope.row.goodsCode}}</template>
        </el-table-column>
        <el-table-column label="所属产品" width="200">
          <template slot-scope="scope">{{scope.row.productName}}</template>
        </el-table-column>
        <el-table-column label="商品规格" width="400">
          <template slot-scope="scope">
            <div class="spce-list">
              <div class="spce-list-item" v-for="spce in scope.row.goodsSpec" :key="spce.id">
                <div class="text">{{spce.specName}}</div>
                <div class="text">{{spce.specValue}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品介绍">
          <template slot-scope="scope">{{scope.row.remarks}}</template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getGoodList } from "@/api/good";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10
};
export default {
  name: "Goodlist",
  components: {},
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: true
    };
  },
  created() {
    this.getList();
  },
  watch: {},
  methods: {
    getList() {
      this.listLoading = true;
      getGoodList(this.listQuery).then(res => {
        if (res.code === 200) {
          this.listLoading = false;
          this.list = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleCreateProduct() {
      this.$router.push({
        path: "/pms/createGood"
      });
    },
    handleEdit() {}
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.layout-good-list {
  .good-table /deep/ {
    td.el-table__cell {
      padding: 0px;
    }
  }
  .spce-list {
    display: flex;
    .spce-list-item {
      min-width: 100px;
      .text {
        line-height: 30px;
        height: 30px;
      }
    }
  }
}
</style>


